/* eslint-disable */
import React from 'react'
import { Card, message, Tabs, Upload, Input } from 'antd'
import './index.scss'
import { observer } from 'mobx-react'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import { updateUserInfo } from '@/api/user'
import Store from '../../store'

interface IProps {}
interface IState {
  fileList: any[]
  loading: boolean
  nickNameStatus: boolean
  nickName: string
  [x: string]: any
}
const { TabPane } = Tabs
@observer
class Index extends React.Component<IProps, IState> {
  constructor(props) {
    super(props)
    this.state = {
      fileList: [],
      loading: false,
      nickNameStatus: true, // 昵称是否可编辑
      nickName: Store.userInfo.nickName,
    }
  }
  componentDidMount() {}
  beforeUpload = (): any => {}
  handleChange = () => {}
  upload = async e => {
    let file = new FormData()
    file.append('file', e.file)
    console.log(file)
    file.append('type', 'avatar')
    file.append(
      'content',
      JSON.stringify({
        userId: Store.userInfo.userId,
      })
    )
    const res: any = await updateUserInfo(file)
    if (res.code === 200) {
      let userInfo = Store.userInfo
      userInfo.avatar = res.url
      Store.setUserInfo(userInfo)
      message.success('上传成功！')
      console.log(Store.userInfo.avatar)
    } else {
      message.error('上传失败！')
    }
    console.log(res)
    console.log(e)
  }
  update = async name => {
    // 修改按钮
    console.log(this.state[name + 'Status'])
    if (!this.state[name + 'Status']) {
      // 点击了保存
      let file = new FormData()
      console.log(file)
      file.append('type', name)
      file.append(
        'content',
        JSON.stringify({
          userId: Store.userInfo.userId,
          nickName: this.state.nickName,
        })
      )
      const res: any = await updateUserInfo(file)
      if (res.code === 200) {
        let userInfo = Store.userInfo
        userInfo[name] = this.state[name]
        Store.setUserInfo(userInfo)
        message.success('修改成功！')
      } else {
        message.success('修改失败！')
      }
      console.log(res)
    }
    this.setState((state: any) => ({
      [name + 'Status']: !state.nickNameStatus,
    }))
  }
  nickNameChange = e => {
    console.log(e)
    this.setState({ nickName: e.target.value })
  }
  render() {
    const uploadButton = (
      <div>
        {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>上传</div>
      </div>
    )
    return (
      <div className='profile-info-content'>
        <Card title='个人资料'>
          <p className='list-item avatar'>
            <div>
              <span className='label'>头像</span>
            </div>

            <div>
              <Upload
                name='avatar'
                listType='picture-card'
                className='avatar-uploader'
                showUploadList={false}
                action='#'
                customRequest={this.upload}
                beforeUpload={this.beforeUpload}
                onChange={this.handleChange}
              >
                {Store.userInfo.avatar ? (
                  <img
                    className='avatar-upload'
                    src={Store.userInfo.avatar}
                    alt='avatar'
                    style={{ width: '100%' }}
                  />
                ) : (
                  uploadButton
                )}
              </Upload>
            </div>
            <div className='tip'>请上传png、jpg格式图片</div>
          </p>
          <p className='list-item'>
            <span className='label'>昵称</span>
            <Input
              style={{ width: '300px' }}
              readOnly={this.state.nickNameStatus}
              value={this.state.nickName}
              onChange={this.nickNameChange}
            ></Input>
            <div className='opreate'>
              <a onClick={() => this.update('nickName')}>
                {this.state.nickNameStatus ? '修改' : '保存'}
              </a>
            </div>
          </p>
          <p className='list-item'>
            <span className='label'>QQ</span>
          </p>
        </Card>
      </div>
    )
  }
}
export default Index
